html,body{
  background: #fff;
}
header{
  .hunter-info{
    position: absolute;
    //width: 100%;
    top: 0.22rem;
    padding: 0 0.22rem;

    .hunter-avatar{
      width: 1rem;
      height: 1rem;
      border-radius: 1rem;
      float: left;
      img{
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 100%;
      }
    }
    .info{
      margin-left: 1.2rem;
      font-size: 0.28rem;
      color: #FFFFFF;
      .level{
        padding-top: 0.05rem;
      }
      .current{
       margin-top: 0.1rem;
      }
    }
  }
}

.hunter-container{
  background: #fff;
  position: relative;
  margin: -0.5rem 0.22rem;
  padding-bottom: 0.29rem;

  .hunter-box{
    z-index: 2;
    .accumulation-box{
      background: #FFFFFF;
      box-shadow: 0 0.04rem 0.08rem 0 rgba(0,0,0,0.10);
      border-radius: 0.05rem 0.05rem 0.16rem 0.16rem;
      padding: 0.22rem 0.4rem;
      .tips{
        font-size: 0.28rem;
        color: #999999;
      }
      .amount-box{
        padding: 0.33rem 0 0.22rem;
        .amount{
          font-size: 0.32rem;
          color: #6392FE;
          span{
            font-size: 0.48rem;
          }

          .withdraw-btn{
            float: right;
            text-align: right;
            font-size: 0.28rem;
            color: #666666;
            padding-right: 0.2rem;
            position: relative;
            line-height: 0.8rem;
            &:after{
              content: '';
              display: block;
              width: 0.11rem;
              height: 0.2rem;
              background: url("../../images/distribution/icon-right.png") center no-repeat;
              background-size: 100% 100%;
              position: absolute;
              right: 0;
              top: 0.3rem;
            }
          }
        }

      }
      .performance-box{
        padding: 0.4rem 0;
        display: flex;
        .performance-name{
          flex: 1;
          font-size: 0.28rem;
          color: #999999;
          text-align: center;
          line-height: 0.34rem;
          span{
            font-size: 0.42rem;
            color: #666666;
            line-height: 0.34rem;
            padding-left: 0.2rem;
          }
        }

      }
    }

    /*推广平台和网约车共有样式*/
    .generalize{
      margin: 0.216rem 0 0;
      .head{
        background: #FFFFFF;
        box-shadow: 0 0 0.02rem 0 rgba(0,0,0,0.10);
        border-radius: 0.05rem;
        .name{
          display: inline-block;
          padding: 0.075rem 0.22rem;
          font-size: 0.32rem;
          color: #FFFFFF;
          border-radius: 0.05rem 0 0 0.05rem;
          background: #F6A480;
        }
        .description{
          display: inline-block;
          height:100%;
          padding: 0.142rem 0.45rem 0.142rem 0;
          font-size: 0.24rem;
          color: #999999;
          position: relative;
          float: right;
          margin-right: 0.11rem;
          &:after{
            content: '';
            display: block;
            width: 0.33rem;
            height: 0.33rem;
            position: absolute;
            right: 0;
            top: 0.127rem;
            background: url("../../images/distribution/icon-question.png") center no-repeat;
            background-size: 100% 100%;
          }
        }
      }
      .introduction{
        background: #FFFFFF;
        box-shadow: 0 0 0.02rem 0 rgba(0,0,0,0.10);
        border-radius: 0.05rem 0.05rem 0.16rem 0.16rem;
        padding: 0.25rem 0.2rem 0.25rem 0.22rem;
        position: relative;
        p{
          font-size: 0.28rem;
          color: #000000;
          width: 85%;
          line-height: 0.4rem;
        }
        .share-btn{
          position: absolute;
          right: 0.2rem;
          top: 0.25rem;
          width: 14%;
          height: 0.5rem;
          line-height: 0.5rem;
          background: #6392FE;
          box-shadow: 0 0.02rem 0.04rem 0 rgba(0,0,0,0.20);
          border-radius: 1rem;
          font-size: 0.32rem;
          color: #FFFFFF;
          text-align: center;
          z-index: 3;
          &:active{
            background: #014BFA;
          }
        }
        &:before{
          content: '';
          display: block;
          height: 40%;
          width: 0.04rem;
          background: #F6A480;
          border-radius: 0.03rem;
          position: absolute;
          left: 0;
          top: 30%;
        }
      }

    }
    /*推广平台样式*/
    .platform{
      margin: 0.191rem 0 0;
      .head{
        .name{
          background: #F6A480;
        }
      }
      .introduction{
        &:before{
          background: #F6A480;
        }
      }
    }

    /*推广网约车*/
    .hailing{
      margin: 0.191rem 0 0;
      .head{
        .name{
          background: #F88484;
        }
      }
      .introduction{
        &:before{
          background: #F88484;
        }
      }
    }

    /*推广线路*/
    .lines{
      .head{
        .name{
          background:  #82A8FE;
        }
        .tips{
          font-size: 0.24rem;
          color: #9B9B9B;
        }
      }
      .lines-box{
        ul{
          li{
            background: #FFFFFF;
            box-shadow: 0 0 0.02rem 0 rgba(0,0,0,0.10);
            border-radius: 0.05rem 0.05rem 0.16rem 0.16rem;
            padding: 0.22rem;
            position: relative;
            .station{
              font-size: 0.32rem;
              color: #666666;
              width: 85%;

              span{
                padding-left: 0.38rem;
                display: block;
                position: relative;

                &:before{
                  content: '';
                  display: block;
                  width: 0.16rem;
                  height: 0.16rem;
                  border-radius: 0.16rem;
                  position: absolute;
                  top: 0.15rem;
                  bottom: 0;
                  left: 0;
                }
              }
              .start{
                &:before{
                  background: #25CE5F;
                }
                &:after{
                  content: "";
                  position: absolute;
                  top: 0.4rem;
                  left: 0.06rem;
                  bottom: -0.19rem;
                  z-index: 6;
                  width: 0;
                  height: auto;
                  border: 0.02rem solid #ccc;
                  border-radius: 0.5rem;
                }
              }
              .end{
                margin-top: 0.13rem;
                &:before{
                  background: #FE6666;
                }
              }
            }

            .share-btn{
              position: absolute;
              right: .2rem;
              top: .25rem;
              width: 14%;
              height: .5rem;
              line-height: .5rem;
              background: #6392fe;
              box-shadow: 0 0.02rem 0.04rem 0 rgba(0,0,0,.2);
              border-radius: 1rem;
              font-size: .32rem;
              color: #fff;
              text-align: center;
              z-index: 3;
              &:active{
                background: #014BFA;
              }
            }

            .line-info{
              margin: 0.22rem 0 0 0.38rem;
              .name{
                font-size: 0.32rem;
                color: #000000;
                display: inline-block;
                //width: 4.3rem;
                white-space: nowrap;
                overflow: scroll;
              }
              .brokerage{
                float: right;
                display: inline-block;
                height: 0.4rem;
                line-height: 0.4rem;
                opacity: 0.8;
                background: rgba(254,102,102,0.10);
                border: 0.02rem solid #FFB1B1;
                border-radius: 1rem;
                font-size: 0.28rem;
                color: #FF6B6B;
              }
            }

            &:before{
              content: '';
              display: block;
              height: 48%;
              width: 0.04rem;
              background: #82A8FE;
              border-radius: 0.03rem;
              position: absolute;
              left: 0;
              top: 26%;
            }
            &:after{
              content: '';
              display: block;
              width: 90%;
              border: 1px dashed #E8E8E8;
              position: absolute;
              bottom: -1px;
              left: 5%;
            }
            &:last-child:after{
              display: none;
            }
          }
        }
      }

    }
  }


}